<!--
Copyright 2017 The Kubernetes Authors.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<div
  class="kd-bg-background"
  fxFlex
  fxLayoutAlign="space-around center"
>
  <kd-card
    titleClasses="kd-card-top-radius kd-bg-primary kd-accent"
    [role]="'flex'"
    [expandable]="false"
  >
    <div
      title
      i18n
    >
      Kubernetes Dashboard
    </div>
    <div content>
      <form
        fxLayout="column"
        (ngSubmit)="login()"
      >
        <mat-form-field
          fxFlex
          class="kd-login-input"
        >
          <input
            matInput
            id="token"
            name="token"
            i18n-placeholder
            placeholder="Bearer token"
            type="password"
            required
            (input)="onChange($event)"
          />
        </mat-form-field>
        <mat-error
          *ngFor="let error of errors"
          class="kd-login-input kd-error kd-error-text"
        >
          {{ error.status }} ({{ error.code }}): {{ error.message }}
        </mat-error>

        <div
          class="kd-login-mode-description"
          fxFlex
          fxLayout="column"
        >
          <div
            class="kd-equivalent-block kd-muted kd-bg-card-dark"
            fxLayoutAlign=" center"
          >
            <mat-icon>info</mat-icon>
            <div>
              <span i18n>You can generate token for service account with:&nbsp;</span>
              <code>kubectl -n NAMESPACE create token SERVICE_ACCOUNT</code>
            </div>
          </div>

          <div i18n>
            To find out more on how to configure and use bearer tokens, please refer to the
            <a href="https://kubernetes.io/docs/reference/access-authn-authz/authentication/">documentation</a>.
          </div>
        </div>

        <div
          fxLayout="row"
          fxLayoutAlign="end center"
        >
          <button
            mat-raised-button
            color="primary"
            type="submit"
            class="kd-login-button"
            [disabled]="hasEmptyToken()"
            i18n
          >
            Sign in
          </button>
        </div>
      </form>
    </div>
  </kd-card>
</div>
